
<template>
    <div>
            <div class="timeout-title2"></div>
    
        <div class="timeout-title">
            <div class="timeout-timefont">0</div>
            <div class="timeout-timelabel">天</div>
         
            <div class="timeout-timefont">{{f(this.hour)}}</div>
            <div class="timeout-timelabel">时</div>
            <div class="timeout-timefont">{{f(this.minute)}}</div>
            <div class="timeout-timelabel">分</div>
            <div class="timeout-timefont">{{f(this.second)}}</div>
            <div class="timeout-timelabel">秒</div>
    
        </div>

    

        <div style="clear:both;"></div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {

            day: 0,
            hour: 0,
            minute: 0,
            second: 0


        }
    },
    mounted() {

        this.computeRestTime();
        //获取用户信息

    },
    props: ['endtime'],
    computed: {
    },
    methods: {

        f(n) {
            if (isNaN(n)) {
                n = 0;
            }

            if (n < 10) {
                return 0 + n.toString();
            } else {
                return n.toString();
            }

        },

        computeRestTime() {

            // console.log("endtime:" + this.endtime)

            let endTimeStamp = Date.parse(new Date(this.endtime.replace(/-/g, "/")));
            let currentTimeStamp = Date.parse(new Date());

            let restTime = endTimeStamp - currentTimeStamp
            // console.log("endtime:" + endTimeStamp + " currentTimeStamp:" + currentTimeStamp + " rest:" + restTime);

            restTime = restTime / 1000

            this.day = Math.floor(restTime / (24 * 3600));

            this.hour = Math.floor((restTime - this.day * (24 * 3600)) / 3600);

            this.minute = Math.floor((restTime - this.day * (24 * 3600) - this.hour * 3600) / 60)

            this.second = restTime - this.day * (24 * 3600) - this.hour * 3600 - 60 * this.minute;

            // console.log("day:" + this.day);
            // console.log("hour:" + this.hour);
            // console.log("minute:" + this.minute);
            // console.log("second:" + this.second);






























        }





    }

}

</script>

<style lang="scss" scoped>



.timeout-title {
    float: right;
    margin-top: 15px;
    display: inline-block;
    width: 170px;
    height: 30px;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 15px;
    line-height: 30px;
    background-color: rgb(253, 206, 41);
    color: white;
    border-radius: 15px 0px 0px 15px;
}

.timeout-timefont{

    border:1px solid white;
    display: inline-block;
    border-radius: 4px;
    height:18px;
    width:20px;
    margin:0px;
    font-size:11px;
    vertical-align: 1px;
    line-height:18px;
    font-weight: 800;
    text-align:center;
    color:white;




}
.timeout-timelabel{
    display: inline-block;
    border-radius: 4px;
    height:20px;
    width:12px;
    margin:0px;
    padding:0xp;
    font-size:10px;
    line-height:20px;
    text-align:center;
    color:white;



}

</style>
